<template>
  <div class="container">
    <router-view></router-view>
    <!-- 单文件组件使用 自定义组件时 可以使用大驼峰式 -->
    <Footer v-if="!$route.meta.hidden"></Footer>
  </div>
</template>
<script>
import Footer from '@/components/Footer.vue'
export default {
  components: {
    Footer
  }
}
</script>

<style lang="stylus">
*
  margin 0
  padding 0
  list-style none
html
  // font-size 100px
  // font-size 31.25vw // iphone 5  100 / 320 * 100    100进行320等分，以100px为基准单位
  font-size 26.666667vw // iphone 6  100 / 375 * 100

body
  font-size 14px
html, body, .container
  width 100%
  height 100%
.container
  display flex
  flex-direction column
  .box
    flex 1
    display flex
    flex-direction column
    overflow auto
    .header
      height 0.44rem
      background-color #f66
    .content
      flex 1
      overflow auto
      background-color #efefef
  .footer
    height 0.5rem
    background-color #ffffff
    box-shadow 3px 3px 3px spread #efefef
    ul
      width 100%
      height 100%
      display flex
      li
        flex 1
        display flex
        flex-direction column
        align-items center
        justify-content center
        &.router-link-active // <li class="router-link-active"></li>
          color #f66
        span
          font-size 0.24rem
        p
          font-size 0.12rem
          margin-top 3px
</style>
